<template>
    <div class="wai">
        <h1 class="title">{{ msg }}</h1>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in address" :key="item.address_id">
                <div class="mui-navigate-right" @click="change_address(item.address_id,item)">
                    <div class="mui-media-body">地址：{{ item.province + item.detailed_address }}<p></p>电话：{{ item.phone_number
                    }}</div>
                </div>
            </li>
        </ul>
        <button class="add_address" @click="add_address">添加地址</button>
    </div>
</template>
                  
<script>


export default {
    data() {
        return {
            msg: "收货地址",
            address: []
        }
    },
    methods: {
        //获取地址列表
        get_address() {
            this.$http.post('get_address.php', { 'session_id': this.$auth.getAuthorization() },
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {
                        // alert('成功');
                        console.log('获取地址成功');
                    } else {
                        // alert('失败');
                        console.log('失败');
                    }
                    this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        //编辑地址
        change_address(address_id,item) {
            this.$router.push({ name: 'address_info', params: { 
                id:address_id,
                news:item
            
            } });
            
        },
        //添加地址
        add_address() {
            console.log('添加地址');
            this.$router.push('/user/shipping_address/add_address');
        }
    },
    created() {
        this.get_address();
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wai {
    padding-top: 1%;

    .mui-table-view {
        max-height: 835px;
        overflow-y: auto;
        border: 1px solid red;
    }

    .add_address {
        width: 150px;
        height: 50px;
        margin-left: 30%;
        margin-top: 3%;

    }
}
</style>
                                                                          